<template>
  <div>
      <div class="header">
          <span class="leftTableLb">空桌：<span class="leftTableNumber">{{left}}</span></span>
          <span class="unpay-lb leftTableLb">待支付总额：<span class="leftTableNumber">{{unpay}}</span> 元</span>
          <el-input v-model="searchTxt" placeholder="请输入查询桌号" class="search" clearable prefix-icon="el-icon-search"></el-input>
      </div>
      <div class="separator"></div>
      <el-row>
        <el-col v-for="item in orderList" :key="item.id" :span="3" class="col">
            <el-card :body-style="{padding:'0px'}" class="box-card">
                <div slot="header" class="clearfix">
                    <span class="t-lb">桌号：<span class="t-num">{{item.tid}}</span></span>
                    <span class="t-lb">待支付：¥<span class="t-num">{{item.total}}</span></span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="settle(item)">结算</el-button>
                </div>
                <div v-for="di in item.dish" :key="di.id" class="contain">
                    <span class="name">{{di.name}}</span>
                    <span class="price">¥{{di.price}}</span>
                </div>
            </el-card>
        </el-col>
      </el-row>
  </div>
</template>
<script>
import {getUncompleteOrder, settleOrder} from "@/api/order"

export default {
  data(){
      return {
          searchTxt:'',
          left:0,
          unpay:0,
          orderList:[]
      }
  },
  created(){
      this.getUncomplete()
  },
  methods:{
      getUncomplete(){
          getUncompleteOrder({status:0}).then(res => {
              console.log(res)
              this.unpay = res.data.unpay
              this.left = res.data.unused
              this.orderList = res.data.info
          }).catch(err => {
              console.log(err)
          })
      },
      settle(item){
          console.log(item)
          var alert = '确认支付金额:'.concat(item.total)
          this.$confirm(alert,'确认支付订单',{
              confirmButtonText:'确定',
              cancelButtonText:'取消',
              type:'info'
          }).then(()=>{
              settleOrder({
                  billcode:item.billcode
              }).then(res => {
                  console.log(res)
                  this.getUncomplete()
              }).catch(err => {

              })     
          })
      }
  }
}
</script>
<style>
.search{
    width: 15%;
    float: right;
    margin-right: 30px;
}
.header{
    width: 100%;
    height: 100px;
    padding-top: 10px;
}
.separator{
    height: 1px;
    width: 100%;
    color: red;
}
.leftTableLb{
    color: #666;
    font-size: 18px;
    margin: 20px 0 0 20px;
}
.leftTableNumber{
    color: darkorange;
    font-size: 25px;
    margin-top: 20px;
}
.unpay-lb{
    margin-left: 30px;
}
.col{
    margin: 20px 30px 20px 30px;
    float: left;
}
.box-card {
    width: 120%;
    height: 400px;
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .t-lb{
      font-size: 14px;
      color: #333;
  }
  .t-num{
      font-size: 16px;
      color: darkorange;
  }
  .code{
      color: #666;
      margin: 10px 10px 10px 10px;
  }
  .name{
      color: #000;
      margin: 10px 10px 10px 10px;
  }
  .contain{
      margin-top: 15px;
  }
  .price{
      color: darkorange;
      font-size: 15px;
  }
</style>
